<template>
	<view>
		<button type="default" @tap="open1()">选择地址</button>
		<view class="address_box">
			<view class="text">地址：<text>{{areaname}}</text></view>
			<view class="text">地址id:：<text>{{area_id}}</text></view>
			<view class="text">地址坐标：<text>{{coordinate}}</text></view>
		</view>
		<button type="default" @tap="getaddress1()">获取地址1</button>
		<view class="address_box">
			<view class="text">地址：<text>{{SetAddres1.name}}</text></view>
			<view class="text">详细地址:：<text>{{SetAddres1.address}}</text></view>
			<view class="text">地址坐标：<text>{{SetAddres1.latitude}},{{SetAddres1.longitude}}</text></view>
		</view>
		<button type="default" @tap="getaddress2()">获取地址2(H5无法触发)</button>
		<view class="address_box">
			<view class="text">地址：<text>{{SetAddres2.name}}</text></view>
			<view class="text">详细地址:：<text>{{SetAddres2.address}}</text></view>
			<view class="text">地址坐标：<text>{{SetAddres2.latitude}},{{SetAddres2.longitude}}</text></view>
		</view>
		<graceAddressPicker ref="graceAddressPicker1" @confirm="confirm1" :level="1" @close="close1" cancelText="关闭"></graceAddressPicker>
		<tip></tip>
	</view>

</template>

<script>
	import graceAddressPicker from '@/components/graceAddressPicker/graceAddressPicker.vue';
	const QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	export default {
		components: {
			graceAddressPicker
		},
		data() {
			return {
				area_id: '',
				areaname: '',
				coordinate: '',
				SetAddres1: {},
				SetAddres2: {}

			}
		},
		onLoad() {

		},
		methods: {
			open1: function() { //打开
				this.$refs.graceAddressPicker1.open();
			},
			confirm1: function(e) {
				// 返回选中城市的编号及文本信息
				let areaname = e.names.join('-');
				this.areaname = areaname
				let area_id = e.codes.join(',');
				this.area_id = area_id;
				this.formSubmit(areaname)
				this.$forceUpdate(); //强制渲染

				this.close1();

			},
			close1: function() { //关闭
				this.$refs.graceAddressPicker1.hide();
			},
			//获取地址1
			getaddress1() {
				let That = this;
				uni.chooseLocation({
					success: function(res) {
						That.SetAddres1 = res
					}
				});
			},
			//获取地址2
			getaddress2() {
				let That = this;
				//#ifdef H5
				//	在使用Uni开发多端应用时，我们用到定位的情况，首先会使用的就是uni自身提供的uni.getLocation，
				//可是在代码中调用的时候，小程序端只返回了经纬度，H5端直接无法触发函数，甚至连调用失败fail都无法触发。
				this.$tip("你是憨批吗都告诉你不能触发了", 2, "green")

				//#endif
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(That)
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function(add) {
								console.log(add)
								That.SetAddres2 = add
							}
						});

					}
				});
			},

			//获取位置坐标腾讯接口
			formSubmit(areaname) {
				let _this = this
				let Sareaname = areaname
				Sareaname = Sareaname.split('-')
				Sareaname = Sareaname.join('')

				// 实例化API核心类
				let qqmapsdk = new QQMapWX({
					key: '7KUBZ-FSHK5-O6AIX-Q323D-L5GEZ-V6BOO'
				});

				//调用地址解析接口
				qqmapsdk.geocoder({
					//获取表单传入地址
					address: Sareaname, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
					sig: 'reatTGekm6EmpTRaFQkUeDnPDPRDxYCO',
					success: function(res) { //成功后的回调
						// //////console.log(res);
						var res = res.result;
						let latitude = res.location.lat;
						let longitude = res.location.lng;
						_this.coordinate = latitude + ',' + longitude
					},
					fail: function(error) {
						// console.error(error);
					},
					complete: function(res) {

					}
				})


			},
		}



	}
</script>

<style scoped>
	page {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.address_box {
		width: 100%;
		/* padding: 30rpx; */
		box-sizing: border-box;
	}

	.address_box .text {
		width: 100%;
		line-height: 80rpx;
		border-bottom: 1px saddlebrown solid;
		display: block;
		height: 80rpx;
	}

	.address_box .text text {
		color: #007AFF;
	}
	button{
		width: 95%;
		margin: auto;
	}
</style>
